<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>供应商商品库 - 商品管理 - 电商ERP系统</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;">
    <style type="text/css">
        .update {
            display: inline-block;
            margin-left: 15px;
            padding: 0 20px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            background: #009789;
            color: #fff;
            text-align: center;
            border-radius: 3px;
            cursor: pointer;
        }

        .update i {
            display: inline-block;
            margin-right: 10px;
            vertical-align: middle;
            width: 30px;
            height: 30px;
            background: url();
        }
    </style>


    <!-- content starts -->
    <div class="layui-tab layui-tab-brief" lay-filter="demo">
        <ul class="layui-tab-title">
            <ul class="layui-tab-title">
                <!-- <li><a th:href="@{/shop/goods_list}">网店商品管理</a></li> -->
                <li ><a href="/goods/list">ERP商品查询</a></li>
                <li><a class="order-item" href="/goods/spec_list">商品规格查询</a></li>
                <li><a href="/goods/category_list">商品分类管理</a></li>
                <li class="layui-this"><a href="/goods/info_list_for_supplier">供应商商品库</a></li>
            </ul>
        </ul>
    </div>

    <fieldset class="layui-elem-field">
        <legend></legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <form class="layui-form "  method="get" action="/goods/info_list_for_supplier">
                    <div class="layui-input-inline">
                        <select name="supplierId" id="supplierId">
                            <option value="">供应商</option>
                            <option th:each="item: ${supplierList}" th:text="${item.name}" th:value="${item.id}"></option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="publishStatus" id="publishStatus">
                            <option value="">是否发布</option>
                            <option value="1">已发布</option>
                            <option value="0">未发布</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <input type="text" name="number" th:value="${number}" placeholder="商品编码" style="width: 200px;" class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-normal">搜索</button>
                        <i>总共：<span style="color: red" th:text="${totalSize}"></span>条记录</i>
                    </div>

                </form>

            </div>
            <div class="layui-form-item" id="import_order">

                <div class="layui-inline">
                    <form method="post" enctype="multipart/form-data" id="execl_form">
                        <input type="file" name="excel" id="excel" placeholder="" class="layui-input">
                    </form>
                </div>

                <div class="layui-inline">
                    <button type="button" id="excel_upload_btn" class="layui-btn layui-btn-primary">导入数据
                    </button>
                    <span id="excel_upload_btn_" style="display: none;" class="update"><i></i>导入中</span>
                </div>
            </div>


        </div>
    </fieldset>

    <!-- start dd-wrapper -->
    <link rel="stylesheet" href="/goods/order.css"/>
    <div class="dd-wrapper">
        <table class="dd-table">
            <tr>
                <th>
<!--                    <input id="allCheck" type="checkbox"/>-->
                    ID</th>
                <th>供应商</th>
                <th>货号</th>
                <th>颜色</th>
                <th>尺码</th>
                <th>拿货价</th>
                <th>弹力</th>
                <th>面料</th>
                <th>分类</th>
                <th>网盘地址</th>
                <th>提取码</th>
                <th>备注</th>
                <th>发布情况</th>
                <th>发布日期</th>
            </tr>
            <tbody id="order_list">
            <tr th:each="item:${lists}">
                <td>
<!--                    <input type="checkbox" class="currCheck" name="orderNo" th:value="${item.id}" />-->
                    <span th:text="${item.id}"></span>
                </td>
                <td>
                    <span th:text="${item.supplierName}"></span>
                </td>
                <td>
                    <span th:text="${item.number}"></span>
                </td>
                <td>
                    <span th:text="${item.color}"></span>
                </td>
                <td>
                    <span th:text="${item.size}"></span>
                </td>
                <td>
                    <span th:text="${item.price}"></span>
                </td>
                <td>
                    <span th:text="${item.attr1}"></span>
                </td>
                <td>
                    <span th:text="${item.attr2}"></span>
                </td>
                <td>
                    <span th:text="${item.attr3}"></span>
                    <a th:attr="data-id=${item.id},attr3=${item.attr3}" href="javascript:;" title="修改属性" class="layui-icon layui-icon-edit attr3-edit">
                    </a>
                </td>
                <td>
                    <span th:text="${item.panUrl}"></span>
                </td>
                <td>
                    <span th:text="${item.panPwd}"></span>
                </td>
                <td>
                    <span th:text="${item.remark}"></span>
                </td>
                <td>
                    <span th:if="${!#strings.isEmpty(item.shopIds)}" th:each="shop:${item.shopIds.split(',')}" >
                        <b class="layui-btn-sm layui-btn-primary" th:if="${shop.equals('5')}"><img src="https://mms-static.pddpic.com/express/favicon.ico" width="15px" height="15px" title="梦小妮牛仔裤" /></b>
                        <b class="layui-btn-sm layui-btn-primary" th:if="${shop.equals('6')}"> <img src="https://img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png" width="15px" height="15px" title="梦小妮牛仔裤" /></b>
                        <b class="layui-btn-sm layui-btn-primary" th:if="${shop.equals('22')}"><img src="https://lf1-fe.ecombdstatic.com/obj/eden-cn/upqphj/homepage/icon.svg" width="15px" height="15px" title="梦小妮牛仔裤"/></b>
                        <b class="layui-btn-sm layui-btn-primary" th:if="${shop.equals('14')}"><img src="https://mms-static.pddpic.com/express/favicon.ico" width="15px" height="15px" title="甘小姐de店"/></b>
                    </span>
                    <li>
                        <a href="javascript:;" class="layui-btn-sm layui-btn-primary edit_publish" th:attr="data-id=${item.id}" title="发布到网店">
                            发布到网店
                        </a>
                    </li>

                </td>
                <td>
                    <span th:text="${item.publishDate}"></span>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <!-- end dd-wrapper -->
    <div class="layui-box layui-laypage layui-laypage-default pageBox">
        <paging:pager th:value="${pageIndex}" th:rows="${totalSize}" th:size="${pageSize}"/>
    </div>

    <script type="text/javascript" src="/goods/Tips/Tips.min.js"></script>
    <script type="text/javascript">
        var layer;
        var $;
        var windowOpen;
        var orderList;

        layui.use(['jquery', 'form', 'layer'], function () {

            $ = layui.jquery;
            var form = layui.form;
            layer = layui.layer;

            $(function () {
                $("#supplierId").val('[[${supplierId}]]');
                $("#publishStatus").val('[[${publishStatus}]]');

                form.render('select'); //刷新select选择框渲染

                $(".attr3-edit").click(function(){
                    var id = $(this).attr('data-id');
                    var attr3 = $(this).attr('attr3');
                    var obj = $(this).siblings('span').eq(0);

                    layer.prompt({
                        formType: 2,
                        value: attr3,
                        title: '请输入'
                    }, function(value, index, elem){
                        var data = {id:id, attr3:value};
                        $.ajax({
                            url: "/goods/edit_attr3_ajax",
                            type: "POST",
                            dataType: "JSON",
                            contentType: 'application/json',
                            data:JSON.stringify(data),
                            success: function (res) {

                                if(res.code == 0){

                                    $(obj).text(value);
                                    layer.close(index)
                                    layer.msg(res.msg);
                                    // location=location;
                                }else
                                    layer.alert(res.msg);
                            }
                        });


                    });
                });


                $(".edit_publish").click(function(){
                    var id = $(this).attr("data-id");

                    layer.open({
                        type: 2,
                        title: '修改发布网店',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['600px', '65%'],
                        content: '/goods/goods_publish_to_shops?id='+id
                    });
                })

                //AJAX 上传订单excel
                $("#excel_upload_btn").click(function () {
                    var supplierId= $("#supplierId").val();
                    if(supplierId === '' || supplierId === 0 ){
                        alert("请选择供应商");
                        return false;
                    }
                    var excel = $("#excel").val();
                    if (excel == '') {
                        alert("请选择文件");
                        return false;
                    } else if (excel.lastIndexOf(".xls") < 0 ) {//可判断以.xls和.xlsx结尾的excel
                        alert("只能上传xls文件,请将文件转换成xls格式");
                    } else {
                        var url = "/goods/info_list_for_supplier_review_ajax";
                        // var formData = new FormData($('#execl_form')[0]);

                        var formData = new FormData();
                        formData.append("excel", document.getElementById("excel").files[0]);
                        formData.append("supplierId",supplierId);
                        $(this).hide();
                        $("#excel_upload_btn_").show();
                        $.ajax({
                            url: url,
                            type: "post",
                            data: formData,
                            success: function (result) {
                                $("#excel_upload_btn_").hide();
                                $("#excel_upload_btn").show();
                                // console.log(result);
                                if (result.code == 0) {
                                    orderList = result.data;
                                    $("#orderCount").text(result.data.length);
                                    alert("excel上传成功，找到" + result.data.length + '条记录');

                                    //循环加入数据到视图
                                    var orderListHtml = $("#order_list").html();
                                    $("#order_list").html("");
                                    // console.log(result.data);

                                    $(result.data).each(function (i, d) {
                                        var trHtml = '<tr>';
                                        trHtml += '<td><input type="checkbox" class="currCheck" name="orderNo" value="' + d.id + '" />' + d.id + '</td>'
                                        trHtml += '<td>' + d.number + '</td>'
                                        trHtml += '<td>' + d.color + '</td>'
                                        trHtml += '<td>' + d.size + '</td>'
                                        trHtml += '<td>' + d.price + '</td>'
                                        trHtml += '<td>' + d.attr1 + '</td>'
                                        trHtml += '<td>' + d.attr2 + '</td>'
                                        trHtml += '<td>' + d.panUrl + '</td>'
                                        trHtml += '<td>' + d.panPwd + '</td>'
                                        trHtml += '<td>' + d.remark + '</td>'
                                        trHtml += '</tr>';

                                        orderListHtml += trHtml;
                                    })
                                    $("#order_list").html(orderListHtml);
                                    $("#import_order").hide()
                        
                                    // $("#orderItemRows").text(rows);
                                } else {
                                    alert("更新失败:" + result.msg);
                                }

                                // alert(JSON.stringify(result));
                                return false;
                            },
                            error: function () {
                                alert("excel上传失败");
                            },
                            cache: false,
                            contentType: false,
                            processData: false
                        });
                    }

                    return false;
                })



                //批量导入
                $("#excel_import").click(function () {
                    var orderNos = [];
                    var importOrderList = [];//选中的导入订单
                
                    $("input[name^='orderNo']").each(function (i, el) {
                        var a = false;
                        if ($(this).is(':checked')) {
                            var selectOrderNo = $(this).val();
                            orderNos.push(selectOrderNo);
                            orderList.filter(function (p) {
                                if (p.id == selectOrderNo) {
            
                                    importOrderList.push(p);
                                }
                            });
                            if (a) {
                                return false;
                            }
                        }
                    });
                    //console.log(orderNos);
                    if (orderNos.length == 0) {
                        alert("请选择订单");
                    } else {

                        $("#excel_import_").show();
                        $("#excel_import").hide();
                        $.ajax({
                            url: "/funds/order_settlement_pdd_import_submit",
                            type: "post",
                            dataType: "JSON",
                            contentType: 'application/json',
                            data: JSON.stringify({shopId:'[[${shopId}]]',orderList:importOrderList}),
                            success: function (result) {
                                $("#excel_import_").hide();
                                $("#excel_import").show();
                                // console.log(result);
                                if (result.code == 0) {
                                    alert(result.data);
                                    // window.location.reload();
                                } else {
                                    alert("更新失败:" + result.msg);
                                }

                                // alert(JSON.stringify(result));
                                return false;
                            }
                        });
                    }


                })

                $('#allCheck').on('change', function (e) {
                    var checked = $('#allCheck').prop('checked');
                    $('.currCheck').prop('checked', checked);
                    $('#selectedNum').text('(' + getSelectNum() + ')')
                })

                $('#order_list').on('change', '.currCheck', function (e) {
                    for (var i = 0; i < $('.currCheck').length; i++) {
                        var checked = $('.currCheck').eq(i).prop('checked');
                        console.log(checked);
                        if (!checked) {
                            $('#allCheck').prop('checked', false);
                            $('#selectedNum').text('(' + getSelectNum() + ')')
                            return;
                        }
                    }
                    $('#allCheck').prop('checked', true);
                })


                function getSelectNum() {
                    var n = 0;
                    for (var i = 0; i < $('.currCheck').length; i++) {
                        var checked = $('.currCheck').eq(i).prop('checked');
                        if (checked) {
                            n++;
                        }
                    }
                    return n;
                }

            })
        });
    </script>
</div>


</body>
<html>
